/**
 * Created by ziyu on 17/3/7.
 */
import React, {Component, PropTypes} from 'react'
import {Table, Popover, Card, Button, Row, Col, Icon, Tag} from 'antd'
import styles from './Index.less'
import {fetchPost} from "../../../utils/request";

class List extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            stepType: props.stepType,
            list: props.list,
            countInfo: props.countInfo,
            id: null,
            userId: null,
            item: {},

            page: {
                currentPage: 1,
                pageSize: 20,
                totalCount: 0
            },
            tradeNo: 1
        }
    }

    componentWillReceiveProps(props) {
        if (props.list.length > 0) {
            if (props.id != this.state.id || props.userId != this.state.userId || props.isFetch || props.page.totalCount != this.state.page.totalCount) {
                this.setState({
                    list: props.list,
                    countInfo: props.countInfo,
                    id: props.id,
                    userId: props.userId,
                    page: props.page,
                })
            }
        } else {
            this.setState({
                list: [],
                countInfo: props.countInfo,
                id: null,
                userId: null,
                page: props.page,
            })
        }
    }

    // 单击行
    handleClickRow(record) {
        this.setState({
            id: record.collectionNo,
            userId: record.tradeNo
        }, () => {
            this.props.chooseOrder({
                'id': record.collectionNo,
                'userId': record.tradeNo,
                'activeKey': 'baseInfo',
                'item': record
            })
        })

    }

    // 单击行 样式改变
    handleChosedRow(itemId) {
        if (itemId == this.state.id) {
            return styles.active
        } else {
            return styles.listRow
        }
    }



    setPagination() {
        let self = this
        return {
            total: this.state.page.totalCount,
            pageSize: this.state.page.pageSize,
            showSizeChanger: false,
            showQuickJumper: true,
            showTotal(total) {
                return `Total ${total} `
            },
            onChange(current) {
                self.setState({
                    page: {
                        ...self.state.page,
                        current
                    }
                }, () => {
                    self.props.currentPage(current)
                })
            }
        }
    }


    render() {
        let self = this
        const columns = [
            {
                title: 'App',
                dataIndex: 'appName',
                key: 'appName'
            },
            {
                title: 'Loan ID / Mobile',
                dataIndex: 'mobile',
                key: 'mobile',
                render: (text, record) => {
                    return (
                        <div>
                            <div style={{color: 'red'}}>{record.originNo}</div>
                            <div>{record.mobile}</div>
                        </div>
                    )
                },
            },
            {
                title: 'Name',
                dataIndex: 'name',
                key: 'name'
            },
            {
                title: 'Overdue Days',
                dataIndex: 'overdueDays',
                key: 'overdueDays',
                render: (text, record) => (
                    <div>
                        {record.overdueDays} days
                    </div>
                )
            },
            {
                title: 'Last call',
                dataIndex: 'followTime',
                key: 'followTime',
                render: (text, record) => (
                    record.followTime ?
                        <div>
                            <div><Tag style={{marginBottom: 4}}>{record.followTime}</Tag></div>
                        </div> : null
                )
            }
        ]

        return (

            <div className='ant-layout-container'>
                <Card bodyStyle={{padding: 0, height: 820}} bordered={false} noHovering={true}>
                    <Row>
                        <Col span={20}>Total: {this.state.countInfo.totalCount} /
                            Completed: {this.state.countInfo.completedCount} ／
                            To be completed: {this.state.countInfo.unfinishedCount} /
                            Rate: {this.state.countInfo.completionRate} </Col>
                        {/*<Col span={4} className={styles.switchDiv}>*/}
                        {/*  <Button type="primary" className={styles.switchBtn} onClick={() => this.props.switchChange()}>Reverse<Icon*/}
                        {/*    type="swap" style={{fontSize: 24, color: '#fff'}}/></Button>*/}
                        {/*</Col>*/}
                    </Row>
                    <Table pagination={this.setPagination(this)} key='collectionNo' columns={columns}
                           dataSource={self.state.list}
                           loading={self.state.loading}
                           bordered
                           onRowClick={(record) => this.handleClickRow(record)}
                           rowClassName={(record) => this.handleChosedRow(record.collectionNo)}
                           size='small'
                           scroll={{x: 510}}
                    />

                </Card>
            </div>

        )
    }
}

export default List
